<!DOCTYPE html>
<html>
  <!-- Html Head Tag-->
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Rms">
  <!-- Open Graph Data -->
  <meta property="og:title" content="Vue实现搜歌播放"/>
  <meta property="og:description" content="" />
  <meta property="og:site_name" content="帅的一逼"/>
  <meta property="og:type" content="article" />
  <meta property="og:image" content="http://shsa.gitee.io"/>
  
    <link rel="alternate" href="/atom.xml" title="帅的一逼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  

  <!-- Site Title -->
  <title>帅的一逼</title>

  <!-- Bootstrap CSS -->
  
<link rel="stylesheet" href="/myblog/css/bootstrap.min.css">

  <!-- Custom CSS -->
  
  
<link rel="stylesheet" href="/myblog/css/style.light.css">


  <!-- Google Analytics -->
  

<meta name="generator" content="Hexo 4.2.1"></head>

  <body>
    <!-- Page Header -->


<header class="site-header header-background" style="background-image: url(/myblog//img/i.jpg)">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="page-title with-background-image">
          <p class="title">Vue实现搜歌播放</p>
          <p class="subtitle"></p>
        </div>
        <div class="site-menu with-background-image">
          <ul>
            
              <li>
                <a href="/myblog/">
                  
                  Home
                  
                </a>
              </li>
            
              <li>
                <a href="/myblog/archives">
                  
                  Archives
                  
                </a>
              </li>
            
              <li>
                <a href="/myblog/about">
                  
                  About
                  
                </a>
              </li>
            
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

<article>
  <div class="container typo">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="post-info text-muted">
          
            <!-- Author -->
            <span class="author info">By Rms</span>
          
          <!-- Date -->
          <span class="date-time info">On
            <span class="date">2020-06-29</span>
            <span class="time">21:53:53</span>
          </span>
          
        </div>
        <!-- Tags -->
        
        <!-- Post Main Content -->
        <div class="post-content">
          <h1 id="使用Vue进行文本框搜索歌曲并播放"><a href="#使用Vue进行文本框搜索歌曲并播放" class="headerlink" title="使用Vue进行文本框搜索歌曲并播放"></a>使用Vue进行文本框搜索歌曲并播放</h1><h4 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h4><ol>
<li><h5 id="刚进去界面"><a href="#刚进去界面" class="headerlink" title="刚进去界面"></a>刚进去界面</h5></li>
</ol>
<p><img src="https://pic.baixiongz.com/2020/06/29/ec6b5e2d88504.png" alt="image-20200629223020180"></p>
<ol start="2">
<li><h5 id="搜索时按回车键数据由下拉框形式展现"><a href="#搜索时按回车键数据由下拉框形式展现" class="headerlink" title="搜索时按回车键数据由下拉框形式展现"></a>搜索时按回车键数据由下拉框形式展现</h5><p><img src="https://pic.baixiongz.com/2020/06/29/1896ba3c7fc01.png" alt="image-20200629223020180"></p>
</li>
</ol>
<p><img src="https://pic.baixiongz.com/2020/06/29/36fd9bf287334.png" alt="image-20200629223020180"></p>
<ol start="3">
<li><h5 id="点击播放则实现播放"><a href="#点击播放则实现播放" class="headerlink" title="点击播放则实现播放"></a>点击播放则实现播放</h5><p><img src="https://pic.baixiongz.com/2020/06/29/ac8efa12e4c0c.png" alt="图片.png"></p>
</li>
</ol>
<h4 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h4><h5 id="1-页面实现代码"><a href="#1-页面实现代码" class="headerlink" title="1.页面实现代码"></a>1.页面实现代码</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">section</span> <span class="attr">id</span>=<span class="string">"player"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">header</span> <span class="attr">class</span>=<span class="string">"header"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span></span><br><span class="line">            播放器</span><br><span class="line">        <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 输入框 </span></span><br><span class="line"><span class="comment">        @keyup.enter="getSong"  回车键按下时执行getSong方法中代码</span></span><br><span class="line"><span class="comment">        v-model="keywords"  实现双向数据绑定</span></span><br><span class="line"><span class="comment">        --&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">placeholder</span>=<span class="string">"请输入歌名"</span> <span class="attr">class</span>=<span class="string">"new-todo"</span> @<span class="attr">keyup.enter</span>=<span class="string">"getSong"</span> <span class="attr">v-model</span>=<span class="string">"keywords"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 列表区域 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">section</span> <span class="attr">class</span>=<span class="string">"main"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"music-list"</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">          <span class="comment">&lt;!-- 使用for循环进行数据绑定--&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"music"</span> <span class="attr">v-for</span>=<span class="string">"(song,i) in songList"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"view"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"index"</span> &gt;</span>&#123;&#123;i+1&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">label</span>&gt;</span>&#123;&#123;song.name&#125;&#125;<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">                    </span><br><span class="line">                   <span class="comment">&lt;!-- 播放按钮</span></span><br><span class="line"><span class="comment">                   @click="play(song.id)"  点击播放图标执行play方法</span></span><br><span class="line"><span class="comment">                   --&gt;</span></span><br><span class="line">                   </span><br><span class="line">                    <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"play"</span> @<span class="attr">click</span>=<span class="string">"play(song.id)"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 音频标签 </span></span><br><span class="line"><span class="comment">    url 根据点击的查询到歌曲id  再根据id返回url</span></span><br><span class="line"><span class="comment">    --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">footer</span> <span class="attr">class</span>=<span class="string">"footer"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">audio</span> <span class="attr">:src</span>=<span class="string">"url"</span> <span class="attr">controls</span> <span class="attr">autoplay</span>&gt;</span><span class="tag">&lt;/<span class="name">audio</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="2-引入vue的路径"><a href="#2-引入vue的路径" class="headerlink" title="2.引入vue的路径"></a>2.引入vue的路径</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 开发环境版本，包含了有帮助的命令行警告   版本问题bOOTCDN上查询--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- axios --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h5 id="3-实现回车搜歌"><a href="#3-实现回车搜歌" class="headerlink" title="3.实现回车搜歌"></a>3.实现回车搜歌</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm=<span class="keyword">new</span> Vue(&#123;</span><br><span class="line">       el:<span class="string">'#player'</span>,   <span class="comment">//找到自己对应的id</span></span><br><span class="line"></span><br><span class="line">       data:&#123;</span><br><span class="line">           keywords:<span class="string">''</span>，    <span class="comment">//设置默认的keywords返回值</span></span><br><span class="line">		songList:[]</span><br><span class="line">       &#125;,</span><br><span class="line">       methods:&#123;</span><br><span class="line">           getSong()&#123;</span><br><span class="line">               <span class="keyword">var</span> $<span class="keyword">this</span>=<span class="keyword">this</span>;    <span class="comment">//在方法中使用this不生效  所以进行转换</span></span><br><span class="line">               axios.get(<span class="string">'https://autumnfish.cn/search'</span>, &#123;  <span class="comment">//路径就是网络接口</span></span><br><span class="line">                   params: &#123;</span><br><span class="line">                       keywords: <span class="keyword">this</span>.keywords</span><br><span class="line">                   &#125;</span><br><span class="line">               &#125;)</span><br><span class="line">                   .then(<span class="function"><span class="keyword">function</span> (<span class="params">response</span>) </span>&#123;</span><br><span class="line">                       <span class="comment">// console.log(response.data);  打印搜索到的全部json数据在控制台</span></span><br><span class="line">                       $<span class="keyword">this</span>.songList=response.data.result.songs;  <span class="comment">//仔细观察控制台就知道了</span></span><br><span class="line">                   &#125;)</span><br><span class="line">                   .catch(<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">                       <span class="built_in">console</span>.log(error);</span><br><span class="line">                   &#125;);</span><br><span class="line">           &#125;,</span><br></pre></td></tr></table></figure>

<h5 id="4-实现点击播放"><a href="#4-实现点击播放" class="headerlink" title="4.实现点击播放"></a>4.实现点击播放</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">加QQ:<span class="number">1635920919</span>给源码</span><br><span class="line"><span class="keyword">var</span> vm=<span class="keyword">new</span> Vue(&#123;</span><br><span class="line">        el:<span class="string">'#player'</span>,   <span class="comment">//找到自己对应的id</span></span><br><span class="line"></span><br><span class="line">        data:&#123;</span><br><span class="line">            url:<span class="string">''</span> <span class="comment">//将路径返回到上面进行播放</span></span><br><span class="line">        &#125;,</span><br><span class="line">        methods:&#123;</span><br><span class="line">			play(id)&#123;</span><br><span class="line">                <span class="keyword">var</span> $<span class="keyword">this</span>=<span class="keyword">this</span>;</span><br><span class="line">                axios.get(<span class="string">'https://autumnfish.cn/song/url'</span>, &#123; <span class="comment">//网上接口 实现查找到歌曲</span></span><br><span class="line">                    params: &#123;</span><br><span class="line">                        id: id</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;)</span><br><span class="line">                    .then(<span class="function"><span class="keyword">function</span> (<span class="params">response</span>) </span>&#123;</span><br><span class="line">                        <span class="built_in">console</span>.log(response.data);</span><br><span class="line">                        $<span class="keyword">this</span>.url=response.data.data[<span class="number">0</span>].url; <span class="comment">//仔细看控制台就知道了</span></span><br><span class="line">                    &#125;)</span><br><span class="line">                    .catch(<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">                        <span class="built_in">console</span>.log(error);</span><br><span class="line">                    &#125;);</span><br><span class="line">            &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


        </div>
      </div>
    </div>
  </div>
</article>



    <!-- Footer -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <p class="copyright text-muted">
          Theme By <a target="_blank" href="https://github.com/levblanc">Levblanc.</a>
          Inspired By <a target="_blank" href="https://github.com/klugjo/hexo-theme-clean-blog">Clean Blog.</a>
        <p class="copyright text-muted">
          Powered By <a target="_blank" href="https://hexo.io/">Hexo.</a>
        </p>
      </div>
    </div>
  </div>
</footer>


    <!-- After Footer Scripts -->

<script src="/myblog/js/highlight.pack.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var codeBlocks = Array.prototype.slice.call(document.getElementsByTagName('pre'))
    codeBlocks.forEach(function(block, index) {
      hljs.highlightBlock(block);
    });
  });
</script>

  </body>
</html>

